<!DOCTYPE html>
<html>
<head>
    <style>
        .all{
            width: 100%;
            min-height:100%;
            position: relative;
            box-sizing: border-box;
            }
        .fenye{
            text-align: center;
           height: 800px;
            position: absolute;
            top: 600px;
            
        }
        .fenye a{
            text-decoration: none;
            border: 1px solid black;
            padding: 5px 7px;
            color: black;
        }
        .fenye a:hover{
            color: blue;
            cursor: pointer;
        }
       
        table{
            border:1px solid;width:800px;height: 500px;
            position: absolute;
            top: 20px;
        }

        td{text-align: center;}

        tr:nth-child(1){font-weight: bold;}

        .highLight{background-color:#fdfdc0 }
    </style>
</head>
<body>
<div class="all">
    <div class="table">
        <table cellpadding="0" cellspacing="0">
            <tr class="head">
                <td>学号</td>
                <td>姓名</td>
                <td>进入时间</td>
                <td>离开时间</td>
            </tr>
            <tr onmouseover="light(this)" onmouseout="unlight(this)" >
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr onmouseover="light(this)" onmouseout="unlight(this)" >
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr onmouseover="light(this)" onmouseout="unlight(this)" >
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr onmouseover="light(this)" onmouseout="unlight(this)" >
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr onmouseover="light(this)" onmouseout="unlight(this)" >
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr onmouseover="light(this)" onmouseout="unlight(this)" >
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr onmouseover="light(this)" onmouseout="unlight(this)" >
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr onmouseover="light(this)" onmouseout="unlight(this)" >
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr onmouseover="light(this)" onmouseout="unlight(this)" >
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr onmouseover="light(this)" onmouseout="unlight(this)" >
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr onmouseover="light(this)" onmouseout="unlight(this)" >
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
  <div class="fenye">
    <a href="#"">上一页</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#">10</a>
    <a href="#">下一页</a>

  </div>
</div>
<script>
        function light(obj){
            obj.setAttribute('class','highLight');
        }
        function unlight(obj){
            obj.removeAttribute('class')
        }
        // 分页
        
</script>  

</body>
</html>